<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .cart {
            width: 100%;
            height: 180px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id='app'>

        <!-- 1. 在使用组件的时候给其添加一个属性 -->
        <!-- 只要不是字符串都需要加 :  -->
        <!-- 属性传值的时候不可以使用大写字母，可以使用连接符 -->
        <cart msg="使用的时候传递的属性" num="10" :age="18" :is="true" :tit="title" :isshow="isShow"></cart>

    </div>

</body>

<!-- 定义组件模板 -->
<template id="cart">
    <!-- 组件中最好是只有一个根标签 -->
    <div v-show="isshow" class="cart">
        <h1>标题</h1>
        <p>新闻内容</p>
        <!-- msg 就是 通过 props 接收的数据 -->
        <p>{{msg}} -- {{num + 24}}</p>
        <p>age: {{ age + 5 }}</p>
        <h1>{{tit}}</h1>
    </div>
</template>

<script>
    const app = Vue.createApp({
        data () {
            return {
                title: '床前明月光',
                isShow: true,
                news: [
                    { title: '北京禁止这类活动', message: '提醒！3月1日至14日，北京禁止这类活动' },
                    { title: '北京银保监局', message: '北京银保监局：个人养老金账户开立约190万户' }
                ]
            }
        },
    })

    app.component('cart', {
        template: '#cart',
        // 2. 在组件内部添加一个 props 接收父组件中传递过来的属性
        props: ['msg', 'num', 'age', 'tit', 'isshow']
    })

    app.mount('#app')
</script>

</html>